<template>
  <div>
    <div
      v-empty="!crm.vipStudents.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <div class="header_top" v-if="crm && crm.vipPool && crm.vipPool.index">
        <span @click="headIndex = 0" :class="headIndex == 0 ? 'span_act' : ''"
          >VIP学员</span
        >
        <span @click="headIndex = 1" :class="headIndex == 1 ? 'span_act' : ''"
          >VIP学员库</span
        >
      </div>
      <!-- VIP学员 -->
      <div v-if="headIndex == 0">
        <c-r-m-new-head
          ref="crmTableHead"
          :crm-type="crmType"
          :sort-data="sortData"
          @filter="handleFilter"
          @handle="handleHandle"
          @scene="handleScene"
          @on-export="exportInfos"
          @on-search="crmSearch"
          title="VIP学员"
          placeholder="请输入VIP学员名称/电话"
        >
        </c-r-m-new-head>
        <div class="table-container">
          <!-- 列表选择操作 -->
          <c-r-m-new-table-manage
            ref="crmTableManage"
            :crm-type="crmType"
            :sort-data="sortData"
            @handle="handleHandle"
          ></c-r-m-new-table-manage>
          <el-table
            v-loading="loading"
            id="crm-table"
            :row-height="40"
            :data="list"
            border
            :max-height="tableHeight"
            :cell-class-name="cellClassName"
            :row-key="`${crmType}Id`"
            class="n-table--border"
            highlight-current-row
            style="width: 100%"
            @row-click="handleRowClick"
            @sort-change="sortChange"
            @header-dragend="handleHeaderDragend"
            @selection-change="handleSelectionChange"
            v-if="isShow"
          >
            <el-table-column
              show-overflow-tooltip
              reserve-selection
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column
              v-for="(item, index) in fieldList"
              :key="index"
              :fixed="index == 0"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :sortable="item.prop != 'poolDay' ? 'custom' : false"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <template v-if="item.prop == 'dealStatus'">
                  <i :class="scope.row[item.prop] | dealIcon" />
                  <span>{{ scope.row[item.prop] | dealName }}</span>
                </template>
                <template v-else-if="item.prop == 'studentStatus'">
                  <span>{{ scope.row[item.prop] | studentStatusName }}</span>
                </template>
                <template v-else-if="item.prop == 'status'">
                  <i
                    v-if="scope.row.status == 2"
                    class="wk wk-circle-password customer-lock"
                  />
                </template>
                <template v-else>{{
                  fieldFormatter(scope.row, scope.column)
                }}</template>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="120"
              v-if="agreement && agreement.sign && agreement.sign.save"
            >
              <template slot-scope="scope">
                <el-button type="primary" @click="sign(scope.row)"
                  >发起签署</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              label="关注"
              align="center"
              fixed="right"
              width="60"
            >
              <template slot-scope="scope">
                <el-tooltip
                  :content="scope.row.star == 0 ? '添加关注' : '取消关注'"
                  effect="dark"
                  placement="top"
                >
                  <i
                    :class="{ active: scope.row.star != 0 }"
                    class="wk wk-focus-on focus-icon"
                    @click="toggleStar(scope.row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column :resizable="false" fixed="right" width="40">
              <template slot="header" slot-scope="slot">
                <field-set :crm-type="crmType" @change="setSave" />
              </template>
            </el-table-column>
            <!-- <wk-empty
            slot="empty"
            :props="{
              buttonTitle: '新建VIP学员',
              showButton: saveAuth,
            }"
            @click="createClick"
          /> -->
          </el-table>
          <div class="p-contianer">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size.sync="pageSize"
              :total="total"
              :pager-count="5"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <!-- VIP学员库 -->
      <div v-if="headIndex == 1">
        <VipStuPool></VipStuPool>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @sign="signHandle"
    />

    <!-- 新建 -->
    <c-r-m-all-create
      v-if="createShow"
      :crm-type="createType"
      :action="createAction"
      @close="createShow = false"
      @save-success="saveSuccess"
    />

    <el-dialog
      :visible="signDialogShow"
      title="发起签署"
      width="590px"
      :before-close="() => (signDialogShow = false)"
      :close-on-click-modal="false"
    >
      <div class="color-02">
        该学员已发起电子协议
        <span style="color:#FF3F3F;">{{ signNum }}份</span>
        ，是否确定要重复发起？可点击详情页面，查看签署记录！
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="signDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="signOpen">确定发起</el-button>
      </span>
    </el-dialog>

    <sign-create
      v-if="isCreate"
      :show="isCreate"
      :action="createActionInfo"
      @save-success="signhandleHandle"
      @close="hideView"
    ></sign-create>
  </div>
</template>

<script>
import CRMAllCreate from "../components/CRMAllCreate";
import { mapGetters } from "vuex";
import CRMAllDetail from "@/views/crm/components/CRMAllDetail";
import TableMixin from "../mixins/Table";
import VipStuPool from "./vipStuPool/index";
import signCreate from "./signCreate";

import { getContractNum, canSubmit } from "@/api/admin/agreement";
export default {
  /** 学员管理 的 学员列表 */
  name: "vipStudentsIndex",
  components: {
    CRMAllDetail,
    // BusinessChecks,
    CRMAllCreate,
    VipStuPool,
    signCreate
  },
  filters: {
    dealIcon(statu) {
      return statu == 1 ? "wk wk-success deal-suc" : "wk wk-close deal-un";
    },

    dealName(statu) {
      return statu == 1 ? "已成交" : "未成交";
    },

    studentStatusName(statu) {
      return statu === 0 ? "已退学" : statu == 1 ? "已入学" : "--";
    }
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "vipStudents",
      createType: "vipStudents",
      createShow: false,
      isShow: true,
      isCreate: false, // 创建
      createActionInfo: { type: "save", data: null },
      headIndex: 0,
      details: {}, // 详情
      signDialogShow: false, // 签署提示
      signNum: "" // 协议份数
    };
  },
  computed: {
    ...mapGetters(["CRMConfig", "crm"]),
    menuItems() {
      const temp = [];
      if (this.crm && this.crm.vipStudents) {
        temp.push({
          title: "VIP学员",
          path: "vipStudents",
          icon: require("@/assets/img/crm/customer.png")
        });
      }

      return temp;
    }
  },
  mounted() {},
  activated() {
    if (this.isRequested) {
      this.getList();
    }
  },
  deactivated() {
    if (this.$refs.elMenu) {
      this.$refs.elMenu.activeIndex = this.crmType;
    }
  },
  methods: {
    /**
     * 左侧菜单选择
     */
    menuSelect(key, keyPath) {
      this.$emit("menu-select", key, keyPath);
    },

    relativeBusinessClick(data) {
      this.rowID = data.businessId;
      this.rowType = "business";
      this.showDview = true;
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "customerName") {
        return "can-visit--underline";
      } else if (column.property === "riskLabel") {
        return row.riskLabel === "高风险" ? "color-red" : "";
      } else {
        return this.statusClass(row, column, rowIndex, columnIndex);
      }
    },
    // 商机信息查看
    businessCheckClick(e, scope) {
      if (scope.row.businessCount == 0) {
        return;
      }

      const popoverEl = e.target.parentNode;
      this.$set(scope.row, "show", !scope.row.show);
      popoverEl.__vue__.showPopper = !scope.row.show;
    },
    businessClose(e, scope) {
      const popoverEl = e.parentNode;
      popoverEl.__vue__.showPopper = false;
      this.$set(scope.row, "show", false);
    },

    /**
     * 新建点击
     */
    createClick() {
      // this.createType = this.crmType;
      this.createAction = {
        type: "save",
        id: "",
        data: {}
      };
      this.createShow = true;
    },

    signhandleHandle(data) {
      this.isCreate = false;
      this.getList();
    },

    hideView() {
      this.isCreate = false;
    },

    signHandle(data) {
      this.sign(data);
    },

    /**
     * 创建成功
     */
    saveSuccess(data) {
      if (data.type == "customer") {
        this.handleHandle(data);
        if (data.createContacts) {
          this.createType = "contacts";
          this.createAction = {
            type: "relative",
            crmType: "vipStudents",
            data: {
              customer: data.data
            }
          };
          this.createShow = true;
        }
      }
    },

    // 发起签署
    async sign(data) {
      const result = await canSubmit();
      if (result && result.result) {
        this.$message.error("协议份数余额不足，请联系管理员充值");
        return;
      }
      this.details = data;
      const res = await getContractNum({
        customerId: data.studentId,
        customerType: "vip学员"
      });
      if (res && res.code === 0) {
        this.signNum = res.data.num;
        res.data.num > 0 ? (this.signDialogShow = true) : this.signOpen();
      }
    },

    // 确认签署
    signOpen() {
      this.signDialogShow = false;
      this.isCreate = true;
      this.createActionInfo.data = this.details;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
// /deep/.right-container .xr-btn--orange {
//   display: none;
// }
@import "../styles/header-top.scss";
</style>
